<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="msvalidate.01" content="B407C3D39581951D1D46DFD4CDE6ADC5" />
    <title>Web前端导航 - FrontEndNav前端开发网址导航</title>
    <meta name="keywords" content="前端导航,程序员导航,前端开发学习,前端网址大全,前端教程,web-hub,网址导航,FrontEndNav,webhub" />
    <meta name="description"
        content="web前端导航是souldjl推出的前端导航，收录了大量高质量前端相关站点，为广大用户提供学习网站、学习方向、学习途径、最新前端框架等内容。收录国内外前端网站。" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="Author" content="souldjl-YHR" />
    <meta name="Copyright" content="souldjl-YHR" />
    <link rel="shortcut icon" href="img/logo.ico" />
    <link rel="stylesheet" href="./styles/reset.css" />
    <link rel="stylesheet" href="./font/iconfont.css" />
    <link rel="stylesheet" href="./styles/nprogress.css" />
    <link rel="stylesheet" href="./styles/search.css" />

    <link rel="stylesheet" href="./styles/placeholder-loading.min.css">
    <link rel="stylesheet" href="./styles/index.css" />
    <link rel="stylesheet" href="./styles/main.css" />
    <!-- 百度统计 -->
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?36898e675ea59cc7c63cb84fdd6aa783";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>

<body>
    <header>
        <div class="main">
            <div class="logo">
              <a href="/index.html">
                <img src="./img/logo.png">
                <span>小呆导航</span>
              </a>
            </div>
            <nav class="nav">
              <ul>
                                
                  <li><a href="/view/liuyan.html">在线留言</a></li>
                  <li><a href="/view/about.html">关于本站</a></li>
                
              </ul>
            </nav>
            <div class="head-btn visible-lg">
              <a href="/sethome.html" target="_blank">设为首页</a>
            </div>
          </div>
    </header>
    <div class="container" id="container">
        <div class="left-bar">
            <!-- <div class="title">
                <h1>FrontEndNav</h1>
            </div> -->

            <div class="header"><h2>前端开发</h2></div>
            <!-- 分类导航菜单 -->
            <div class="nav">
                <!-- <div class="home active item">
                    <a href="javascript:void(0);">
                        <i class="iconfont icon-icon_fabu"></i> 前端网站导航
                    </a>
                    <i class="hairlines"></i>
                </div> -->

                <div class="nav-item">
                    <div class="category-nav" id="category">
                        <ul>
                            <!-- 导航栏分类渲染 -->
                            <script id="CategoryId" type="text/html">
                {{each list value index}}
                <li id="{{value.Category_id}}" class="{{index==0 ? 'active' : ''}}">
                  <a data-id="{{value.Category_id}}">
                    <i data-id="{{value.Category_id}}"
                      class="iconfont {{value.category_icon}}"></i>{{value.category_CN}}
                  </a>
                </li>
                {{/each}}
              </script>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 我的github -->
            <div class="my-link item">
                <a href="/"> Powered by souldjl</a>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="main" id="mainWrap">
            <!-- 个人bar -->
            <section class="own">
                <div class="own-left">
                    <div class="current-time">
                        <span id="yiyan">-</span>
                    </div>
                </div>
                <div class="own-right">
                    <ul class="own-link">
                        <li><a href="https://github.com/souldjl" target="_blank">GitHub</a></li>
                        <!-- <li><a href="javascript:;" id="aboutThis">关于本站</a></li> -->
                    </ul>
                </div>
            </section>

            <!-- 搜索框 -->
            <section class="sousuo">
                <div class="search">
                    <div class="search-box">
                        <i class="iconfont icon-baidu" id="search-icon"></i>
                        <input type="text" id="txt" class="search-input" placeholder=" 输入关键字，按回车 / Enter 搜索"
                            autocomplete="off">
                        <i class="iconfont icon-shanchu1" id="search-clear" style="display: none;"></i>
                    </div>
                    <!-- 搜索热词 -->
                    <div class="box search-hot-text" id="box" style="display: none;">
                        <ul></ul>
                    </div>
                    <!-- 搜索引擎 -->
                    <div class="search-engine" style="display: none;">
                        <div class="search-engine-head">
                            <strong class="search-engine-tit">选择您的默认搜索引擎：</strong>
                            <div class="search-engine-tool">搜索热词：<span id="hot-btn"></span></div>
                        </div>
                        <ul class="search-engine-list"></ul>
                    </div>
                </div>
            </section>

            <!-- 骨架屏 -->
            <div class="ph-box loading">
                <div class="ph-item">
                    <div class="ph-col-12">
                        <div class="ph-picture"></div>
                        <div class="ph-row">
                            <div class="ph-col-10"></div>
                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-12"></div>
                            <div class="ph-col-6"></div>
                            <div class="ph-col-6 empty"></div>
                            <div class="ph-col-12 big"></div>
                        </div>
                        <div class="ph-picture"></div>
                        <div class="ph-row">
                            <div class="ph-col-10"></div>
                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-12"></div>
                            <div class="ph-col-6"></div>
                            <div class="ph-col-6 empty"></div>
                            <div class="ph-col-12 big"></div>
                        </div>
                        <div class="ph-picture"></div>
                        <div class="ph-row">
                            <div class="ph-col-10"></div>
                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-12"></div>
                            <div class="ph-col-6"></div>
                            <div class="ph-col-6 empty"></div>
                            <div class="ph-col-12 big"></div>
                        </div>
                        <div class="ph-picture"></div>
                        <div class="ph-row">
                            <div class="ph-col-10"></div>
                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-12"></div>
                            <div class="ph-col-6"></div>
                            <div class="ph-col-6 empty"></div>
                            <div class="ph-col-12 big"></div>
                        </div>
                        <div class="ph-picture"></div>
                        <div class="ph-row">
                            <div class="ph-col-10"></div>
                            <div class="ph-col-2 empty"></div>
                            <div class="ph-col-12"></div>
                            <div class="ph-col-6"></div>
                            <div class="ph-col-6 empty"></div>
                            <div class="ph-col-12 big"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="mainContent">
                <!-- 分类选项卡模板 -->
                <script id="navItemId" type="text/html">
          {{each list value index}}
          <div class="itemCart" id="{{value.category_item}}">
            <div class="sub-category">
              <div>
                <i class="iconfont {{value.category_icon}}"></i>
                {{value.category_CN}}
              </div>
            </div>
            <div>
              {{each value.item_children value index}}
              <a target="_blank" href="{{value.a_href}}">
                <div class="item">
                  <div class="logo">
                    <img width="100%" class="loaded lazy" data-echo="{{value.img_src}}" src="./img/loading.gif">
                    <span>{{value.child_name}}</span>
                  </div>
                  <div class="desc">
                    {{value.child_desc}}
                  </div>
                </div>
              </a>
              {{/each}}
            </div>
          </div>
          {{/each}}
        </script>
            </div>

            <!-- 尾部 -->
            <div class="footer">
                <p>Hello World - souldjl</p>
                <div class="copyright">
                    <div>
                        Copyright © 2020 - Present
                        站内大部分资源收集于网络，若侵犯了您的合法权益，请联系我们删除！
                        <a href="javascript:void(0);"> Web前端导航 by souldjl </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 返回顶部 -->
        <a href="javascript:;" class="goTop">
            <img src="./img/goTop.png" alt="返回顶部">
        </a>
    </div>

</body>
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/echo.min.js"></script>
<script src="./js/template-web.js"></script>
<script src="./js/nprogress.js"></script>
<script src="./js/search.js"></script>
<script src="./js/index.js"></script>

</html>